<template>
    <div>
         <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-alert
                title="添加商品信息" show-icon center :closable="false"
                type="info">
            </el-alert>

            <el-steps  :active="activeIndex - 0" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数" ></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- tab栏区 -->
            <el-form :model="addForm" :rules="addFormRules"
             ref="addFormRef" label-width="100px" label-position="top">
            <el-tabs v-model="activeIndex" :tab-position="'left'" 
            :before-leave="beforeTabLeave" @tab-click="tabClicked">
                <el-tab-pane label="基本信息" name='0'>
                    <el-form-item label="商品名称" prop="goods_name">
                        <el-input v-model="addForm.goods_name"> </el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input v-model="addForm.goods_price" type="number"> </el-input>
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input v-model="addForm.goods_weight" type="number"> </el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input v-model="addForm.goods_number" type="number"> </el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" prop="goods_cat">
                         <el-cascader
                            expand-trigger="hover"
                            v-model="addForm.goods_cat"
                            :options="cateList"
                            :props="cateProps"
                            @change="handleChange"></el-cascader>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品参数" name='1'>
                    <!-- 渲染表单的Item项 -->
                    <el-form-item :label="item.attr_name" v-for="item in manyTableData"
                    :key="item.attr_id">
                    <el-checkbox-group v-model="item.attr_vals">
                        <el-checkbox :label="cb" v-for="(cb,i) in item.attr_vals" 
                        :key="i" border></el-checkbox>
                        
                    </el-checkbox-group>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品属性" name='2'>
                    <el-form-item :label="item.attr_name" v-for="item in onlyTableData"
                    :key="item.attr_id">
                    <el-input v-model="item.attr_vals"></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品图片" name='3'>
                    <el-upload
                      :action="uploadurl"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      list-type="picture" :headers="headerObj" :on-success="handleSuccess">
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容" name='4'>
                    <quill-editor v-model="addForm.goods_introduce"></quill-editor>
                    <el-button type="primary" class="btnAdd" @click="add"> 添加商品</el-button>
                </el-tab-pane>
            </el-tabs>
            </el-form>
        </el-card>
        <!-- 图片预览 -->
        <el-dialog
            title="图片预览"
            :visible.sync="previewVisible"
            width="50%"
            >
            <span>
                <img :src="previewPath" alt="" class="previewImg">
            </span>
        </el-dialog>
    </div>
</template>

<script>
import _ from 'loadsh'
export default {
    data(){
        return {
            activeIndex:'0',
            addForm:{
                goods_name:'',
                goods_price:0,
                goods_weight:0, 
                goods_number:0,
                goods_cat:[],
                pics:[],
                goods_introduce:'',
                attrs:[]

            },
            addFormRules:{
                goods_name:[
                    {required: true,message:'请输入商品名称', trigger:'blur'}
                ],
                goods_price:[
                    {required: true,message:'请输入商品价格', trigger:'blur'}
                ],
                goods_weight:[
                    {required: true,message:'请输入商品重量', trigger:'blur'}
                ],
                goods_number:[
                    {required: true,message:'请输入商品数量', trigger:'blur'}
                ],
                goods_cat:[
                    {required: true,message:'请选择商品分类', trigger:'blur'}

                ]

            },
            cateList: [],
            cateProps:{
                label:'cat_name',
                value:'cat_id',
                children:'children'
            },
            manyTableData:[],
            onlyTableData:[],
            uploadurl:'http://127.0.0.1:8888/api/private/v1/upload',
            headerObj:{
                Authorization: window.sessionStorage.getItem('token')
            },
            previewPath:'',
            previewVisible:false
         
        }
    },
    created(){
        this.getCateList()

    },
    methods:{
       async getCateList(){
        const {data:res} = await 
        this.$http.get(`categories`)

        if(res.meta.status !==200){
            return this.$message.error('获取商品分类数据失败!');
        }

        this.cateList = res.data
       },
       handleChange(){
           //console.log(this.addForm.goods_cat)
           if(this.addForm.goods_cat.length!==3){
               this.addForm.goods_cat=[]
           }
       },
       beforeTabLeave(activeName,oldActiveName){
        //console.log('马上离开'+oldActiveName)
        //console.log('马上进入'+activeName)
        if(oldActiveName ==='0' && this.addForm.goods_cat.length !==3)
        {
            this.$message.error('请先选择商品分类！')
            return false
        }
       },
       async tabClicked(){
        //    如果tab栏当前选中index为1则马上请求参数列表以供选择
          if(this.activeIndex==='1'){
             const {data:res}= await this.$http.get(`categories/${this.cateId}/attributes`,
              { params:{sel:'many'}})

              if(res.meta.status !==200){
                  return this.$message.error('获取动态参数失败！')
              }
              //console.log(res.data)
              //字符串分割 变数组
              res.data.forEach(item =>{
                  item.attr_vals = item.attr_vals.length ===0 ? []: item.attr_vals.split(',')

              })
              this.manyTableData=res.data
          }
          else if(this.activeIndex==='2'){
              const {data:res}= await this.$http.get(`categories/${this.cateId}/attributes`,
              { params:{sel:'only'}})

              if(res.meta.status !==200){
                  return this.$message.error('获取静态属性失败！')
              }
              this.onlyTableData = res.data

          }

       },
          //监听图片上传成功的事件
        handleSuccess(response){
            console.log(response)
            //拼接得到一个图片信息对象
            const picInfo = {pic:
            response.data.tmp_path}
            
            //将图片信息对象 push到pics数组
            this.addForm.pics.push(picInfo)

        },
          //上传图片预览
        handlePreview(file){
            this.previewPath = file.response.data.url
            this.previewVisible = true

        },
        //上传图片移除
        handleRemove(file){
        const filePath = 
        file.response.data.tmp_path

        const i= this.addForm.pics.findIndex(file => file.pic === filePath)

        this.addForm.pics.splice(i,1)

        //console.log(this.addForm)
        
        },
        add(){
           this.$refs.addFormRef.validate( async valid =>{
               if(!valid) {
                   return this.$message.error('请填写必要的表单项')
               }
               const form = _.cloneDeep(this.addForm)
               form.goods_cat=form.goods_cat.join(',')
               this.manyTableData.forEach(item =>{
                   const newInfo = {
                       attr_id:item.attr_id,
                       attr_value: item.attr_vals.join(' ')
                   }
                   this.addForm.attrs.push(newInfo)
               })

               this.onlyTableData.forEach(item =>{
                   const newInfo = {
                       attr_id:item.attr_id,
                       attr_value: item.attr_vals
                   }
                   this.addForm.attrs.push(newInfo)

               })
               form.attrs = this.addForm.attrs
               console.log(form)

               const {data:res} = await this.$http.post('goods',form)

               if(res.meta.status !==201){
                   return this.$message.error('添加商品失败!')
               }
               this.$message.success('添加商品成功！')

               this.$router.push('/goods')

           })
        }
    },
    computed:{
        cateId(){
            if(this.addForm.goods_cat.length ===3){
                return this.addForm.goods_cat[2]
            }
            return null
        }
    },
  

}
</script>

<style  lang="less" scoped>

.el-checkbox{
    margin: 0 10px 0 0 !important;
}
.previewImg{
    width: 100%;
}
.btnAdd{
    margin-top: 15px;
}
</style>